<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计分析 - 第二课堂素质拓展学分评定系统</title>
    
    <!-- 外部资源 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <!-- CSS 框架 -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- 图表库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="css/styles.css">
    
    <!-- 配置文件 -->
    <script src="js/config.js"></script>
</head>
<body class="bg-gray-50">
    <div class="flex flex-col h-screen">
        <!-- 头部导航区域
   包含系统标题、管理员信息和退出按钮
   样式使用Tailwind CSS框架 -->
<!-- 头部导航 - 简约设计 -->
        <header class="h-16 bg-white border-b border-gray-200 px-6 flex items-center justify-between shadow-sm">
            <div class="flex items-center space-x-4">
                <img src="images/log.svg" alt="logo" class="h-12 w-12">
                <span class="text-xl font-semibold text-gray-900">第二课堂素质拓展学分评定系统</span>
            </div>
            <div class="flex items-center space-x-4">
                <span class="flex items-center text-gray-600">
                    <i class="fas fa-user-circle text-xl mr-2"></i>
                    管理员：Web课程设计小组（6）
                </span>
                <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors duration-200 btn-hover">
                    <i class="fas fa-sign-out-alt mr-2"></i>
                    退出登录
                </button>
            </div>
        </header>

        <div class="flex flex-1 overflow-hidden">
            <!-- 侧边栏 - 简约设计 -->
            <aside class="sidebar">
                <nav class="py-4">
                    <div class="px-4 py-2">
                        <div class="text-gray-500 text-sm font-medium mb-2">主要功能</div>
                        <div class="space-y-1">
                            <a href="student-management.html" class="nav-item flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">
                                <i class="fas fa-users w-5 h-5 flex items-center justify-center"></i>
                                <span class="ml-3">学生管理</span>
                            </a>
                            <a href="data-management.html" class="nav-item flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">
                                <i class="fas fa-database w-5 h-5 flex items-center justify-center"></i>
                                <span class="ml-3">数据管理</span>
                            </a>
                            <a href="statistics-analysis.html" class="nav-item active flex items-center px-4 py-2 text-blue-600 bg-blue-50 rounded">
                                <i class="fas fa-chart-bar w-5 h-5 flex items-center justify-center"></i>
                                <span class="ml-3">统计分析</span>
                            </a>
                            <a href="credit-warning.html" class="nav-item flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">
                                <i class="fas fa-exclamation-triangle w-5 h-5 flex items-center justify-center"></i>
                                <span class="ml-3">学分警示</span>
                            </a>
                        </div>
                    </div>
                </nav>
            </aside>
            
            <!-- 主内容区域 - 统计分析 -->
            <main class="main-content p-6 overflow-auto">
                <div class="mb-6">
                    <h1 class="text-2xl font-semibold text-gray-900 mb-4">统计分析</h1>
                    
                    <!-- 统计卡片组
   显示关键指标：总学生数、平均学分、达标率、预警人数
   响应式布局：移动端1列，平板2列，桌面4列 -->
<!-- 统计概览卡片 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                        <div class="bg-white p-6 rounded-lg border border-gray-200 card-hover">
                            <div class="flex items-center">
                                <div class="p-3 bg-blue-100 rounded-lg">
                                    <i class="fas fa-users text-blue-600 text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">总学生数</p>
                                    <p class="text-2xl font-semibold text-gray-900" id="totalStudentCount">1,234</p>
                                    <p class="text-xs text-green-600">↑ 5.2%</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white p-6 rounded-lg border border-gray-200 card-hover">
                            <div class="flex items-center">
                                <div class="p-3 bg-green-100 rounded-lg">
                                    <i class="fas fa-graduation-cap text-green-600 text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">平均学分</p>
                                    <p class="text-2xl font-semibold text-gray-900" id="avgCredits">6.8</p>
                                    <p class="text-xs text-green-600">↑ 0.3</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white p-6 rounded-lg border border-gray-200 card-hover">
                            <div class="flex items-center">
                                <div class="p-3 bg-yellow-100 rounded-lg">
                                    <i class="fas fa-chart-line text-yellow-600 text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">达标率</p>
                                    <p class="text-2xl font-semibold text-gray-900" id="passRate">78.5%</p>
                                    <p class="text-xs text-green-600">↑ 2.1%</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white p-6 rounded-lg border border-gray-200 card-hover">
                            <div class="flex items-center">
                                <div class="p-3 bg-red-100 rounded-lg">
                                    <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">预警人数</p>
                                    <p class="text-2xl font-semibold text-gray-900" id="warningCount">89</p>
                                    <p class="text-xs text-red-600">↓ 12</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 图表区域 -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                        <!-- 学分分布趋势 -->
                        <div class="bg-white p-6 rounded-lg border border-gray-200 card-hover">
                            <h2 class="text-lg font-semibold text-gray-900 mb-4">学分分布趋势</h2>
                            <div id="creditTrend" style="width: 100%; height: 300px;"></div>
                        </div>
                        
                        <!-- 院系对比 -->
                        <div class="bg-white p-6 rounded-lg border border-gray-200 card-hover">
                            <h2 class="text-lg font-semibold text-gray-900 mb-4">院系学分对比</h2>
                            <div id="departmentComparison" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>

                    <!-- 详细统计表格 -->
                    <div class="bg-white p-6 rounded-lg border border-gray-200 mb-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-4">院系详细统计</h2>
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">院系名称</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学生人数</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">平均学分</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">达标率</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">预警人数</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">趋势</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">计算机学院</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">456</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">7.2</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">85.2%</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">23</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="text-green-600">↗ 上升</span>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">电子信息学院</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">389</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">6.8</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">78.4%</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">31</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="text-green-600">↗ 上升</span>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">自动化学院</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">234</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">7.5</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">92.1%</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">8</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="text-green-600">↗ 上升</span>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">机械工程学院</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">156</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">5.9</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">68.2%</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">27</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="text-red-600">↘ 下降</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 时间维度分析模块
    包含月度趋势折线图和年级对比柱状图
    响应式布局：移动端1列，桌面端2列 -->
            <!-- 时间维度分析 -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <!-- 月度学分趋势图表
    展示近6个月学分获取情况
    使用折线图呈现趋势变化 -->
                <!-- 月度趋势 -->
                        <div class="bg-white p-6 rounded-lg border border-gray-200 card-hover">
                            <h2 class="text-lg font-semibold text-gray-900 mb-4">月度学分获取趋势</h2>
                            <div id="monthlyTrend" style="width: 100%; height: 300px;"></div>
                        </div>
                        
                        <!-- 年级对比图表
    比较各年级平均学分和达标率
    使用双Y轴柱状图展示 -->
                <!-- 年级对比 -->
                        <div class="bg-white p-6 rounded-lg border border-gray-200 card-hover">
                            <h2 class="text-lg font-semibold text-gray-900 mb-4">年级学分对比</h2>
                            <div id="gradeComparison" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- JavaScript 文件 -->
    <script src="js/navigation.js"></script>
    <script src="js/charts.js"></script>
    <script src="js/main.js"></script>
    <script>
        // 页面初始化逻辑
// 1. 创建导航管理对象
// 2. 绑定页面元素事件监听
// 3. 初始化所有图表配置
        document.addEventListener('DOMContentLoaded', function() {
            const navigation = new NavigationManager();
            navigation.initPage();
        });
    </script>
    <script>
        // 初始化统计分析图表
        document.addEventListener('DOMContentLoaded', async function() {
            // 获取学生数据
            const res = await fetch('http://localhost:3000/api/students');
            const students = await res.json();

            // 总学生数
            const totalStudentCount = document.getElementById('totalStudentCount');
            if (totalStudentCount) {
                totalStudentCount.textContent = students.length;
            }

            // 平均学分
            const avgCredits = document.getElementById('avgCredits');
            if (avgCredits) {
                const avg = students.length ? (students.reduce((sum, s) => sum + Number(s.credits), 0) / students.length).toFixed(2) : 0;
                avgCredits.textContent = avg;
            }

            // 达标率（假设学分>=6为达标）
            const passRate = document.getElementById('passRate');
            if (passRate) {
                const pass = students.filter(s => Number(s.credits) >= 6).length;
                const rate = students.length ? ((pass / students.length) * 100).toFixed(1) : 0;
                passRate.textContent = rate + '%';
            }

            // 预警人数（假设学分<4为预警）
            const warningCount = document.getElementById('warningCount');
            if (warningCount) {
                const warn = students.filter(s => Number(s.credits) < 4).length;
                warningCount.textContent = warn;
            }

            // 统计各学分区间人数
            const bins = [0, 2, 4, 6, 8, 10, Infinity];
            const binLabels = ['0-2分', '2-4分', '4-6分', '6-8分', '8-10分', '10分以上'];
            const binCounts = bins.slice(0, -1).map((low, i) =>
                students.filter(s => Number(s.credits) >= low && Number(s.credits) < bins[i+1]).length
            );

            // 渲染学分分布趋势图表
            const creditTrend = echarts.init(document.getElementById('creditTrend'));
            creditTrend.setOption({
                title: {
                    text: '学分分布趋势',
                    left: 'center',
                    textStyle: { fontSize: 16, fontWeight: 'normal', color: '#374151' }
                },
                tooltip: { trigger: 'axis', backgroundColor: '#ffffff', borderColor: '#e5e7eb', borderWidth: 1, borderRadius: 4 },
                legend: { data: binLabels, bottom: 10 },
                xAxis: { type: 'category', data: ['当前分布'], axisLabel: { color: '#6b7280' } },
                yAxis: { type: 'value', axisLabel: { color: '#6b7280' } },
                series: binLabels.map((label, i) => ({
                    name: label,
                    type: 'bar',
                    data: [binCounts[i]],
                    stack: 'total',
                    emphasis: { focus: 'series' }
                }))
            });

            // 初始化院系对比柱状图
// 展示各院系平均学分和达标率双维度数据
// 蓝色柱状表示平均学分，绿色柱状表示达标率百分比
            const departmentComparison = echarts.init(document.getElementById('departmentComparison'));
            departmentComparison.setOption({
                title: {
                    text: '院系学分对比',
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'normal',
                        color: '#374151'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#ffffff',
                    borderColor: '#e5e7eb',
                    borderWidth: 1,
                    borderRadius: 4
                },
                xAxis: {
                    type: 'category',
                    data: ['计算机学院', '电子信息学院', '自动化学院', '机械工程学院'],
                    axisLabel: {
                        color: '#6b7280'
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#6b7280'
                    }
                },
                series: [
                    {
                        name: '平均学分',
                        type: 'bar',
                        data: [7.2, 6.8, 7.5, 5.9],
                        itemStyle: {
                            color: '#2563eb'
                        }
                    },
                    {
                        name: '达标率(%)',
                        type: 'bar',
                        data: [85.2, 78.4, 92.1, 68.2],
                        itemStyle: {
                            color: '#10b981'
                        }
                    }
                ]
            });

            // 初始化月度趋势图
// 数据源：模拟近6个月学分获取数据
// 配置渐变折线效果和阴影区域
            const monthlyTrend = echarts.init(document.getElementById('monthlyTrend'));
            monthlyTrend.setOption({
                title: {
                    text: '月度学分获取趋势',
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'normal',
                        color: '#374151'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#ffffff',
                    borderColor: '#e5e7eb',
                    borderWidth: 1,
                    borderRadius: 4
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    axisLabel: {
                        color: '#6b7280'
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#6b7280'
                    }
                },
                series: [
                    {
                        name: '获取学分',
                        type: 'line',
                        data: [120, 135, 150, 180, 200, 220],
                        smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(37, 99, 235, 0.3)' },
                                { offset: 1, color: 'rgba(37, 99, 235, 0.1)' }
                            ])
                        },
                        itemStyle: {
                            color: '#2563eb'
                        }
                    }
                ]
            });

            // 初始化年级对比图
// 使用双Y轴显示学分值和百分比
// 不同年级用不同颜色区分
            const gradeComparison = echarts.init(document.getElementById('gradeComparison'));
            gradeComparison.setOption({
                title: {
                    text: '年级学分对比',
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'normal',
                        color: '#374151'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    backgroundColor: '#ffffff',
                    borderColor: '#e5e7eb',
                    borderWidth: 1,
                    borderRadius: 4
                },
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 8.2, name: '大一', itemStyle: { color: '#2563eb' } },
                            { value: 7.5, name: '大二', itemStyle: { color: '#10b981' } },
                            { value: 6.8, name: '大三', itemStyle: { color: '#f59e0b' } },
                            { value: 5.2, name: '大四', itemStyle: { color: '#ef4444' } }
                        ],
                        label: {
                            color: '#374151',
                            formatter: '{b}: {c}分'
                        }
                    }
                ]
            });

            // 响应式处理
            window.addEventListener('resize', function() {
                creditTrend.resize();
                departmentComparison.resize();
                monthlyTrend.resize();
                gradeComparison.resize();
            });

            // 院系详细统计表格渲染
            const departments = ['计算机学院', '电子信息学院', '自动化学院', '机械工程学院', '经济管理学院', '外国语学院'];
            const deptTableBody = document.querySelector('table.w-full tbody.divide-y');
            if (deptTableBody) {
                deptTableBody.innerHTML = departments.map(dept => {
                    const deptStudents = students.filter(s => s.department === dept);
                    const count = deptStudents.length;
                    const avgCredits = count ? (deptStudents.reduce((sum, s) => sum + Number(s.credits), 0) / count).toFixed(2) : 0;
                    const passRate = count ? ((deptStudents.filter(s => Number(s.credits) >= 6).length / count) * 100).toFixed(1) : 0;
                    const warningCount = deptStudents.filter(s => Number(s.credits) < 4).length;
                    // 趋势简单判断：达标率>80%为上升，<60%为下降，其余为持平
                    let trend = '持平', trendClass = 'text-gray-600';
                    if (passRate > 80) { trend = '↗ 上升'; trendClass = 'text-green-600'; }
                    else if (passRate < 60) { trend = '↘ 下降'; trendClass = 'text-red-600'; }
                    return `
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${dept}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${count}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${avgCredits}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${passRate}%</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${warningCount}</td>
                            <td class="px-6 py-4 whitespace-nowrap"><span class="${trendClass}">${trend}</span></td>
                        </tr>
                    `;
                }).join('');
            }
        });
    </script>
</body>
</html>